<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const titleDemo = ref(null)
onMounted(() => {
  const titleEcharts = echarts.init(titleDemo.value)
  const option = {
    tooltip: {
      trigger: 'item',
      renderMode: 'html',
      textStyle: {
        color: 'black',
        fontSize: 40
      },
      formatter: (p) => `
      <div style="
        -webkit-text-stroke: 1px red; /* 描边宽度 1px + 颜色深灰色（webkit 前缀兼容） */
        text-stroke: 1px #666; /* 标准属性（部分浏览器支持） */
        color: #333; /* 文字本身颜色 */
        line-height: 1.8; /* 换行后行高更舒展 */
        -webkit-text-fill-color: #333; /* 强制文字填充色（避免描边覆盖文字） */
      ">
        商品：${p.name}<br>
        销量：${p.value} 件
      </div>
    `,
      alwaysShowContent: true
    },
    xAxis: { type: 'category', data: ['袜子', '鞋子', '帽子'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [20, 35, 18] }]
  }
  titleEcharts.setOption(option)
})
</script>
<template>
  <div id="demo">
    <div ref="titleDemo" class="title-demo"></div>
  </div>
</template>
<style lang="scss" scoped>
.title-demo {
  width: 500px;
  height: 500px;
  background-color: lightblue;
}
</style>
